:root {
  --color-error: rgba(240, 61, 41, 1);
  --color-success: rgba(0, 188, 117, 1);
  --color-info: rgba(177, 183, 195, 1);
  --color-warning: rgba(255, 141, 26, 1);
  --color-text: rgba(51, 51, 51, 1);
  --color-primary: rgba(0, 104, 255, 1);

  --color-border: rgba(231, 232, 238, 1);

  --color-bg-hover: #fafafa;
  --color-bg: rgba(247, 248, 252, 1);
  --color-bg-scrollbar: rgba(229, 229, 229, 1);
  // form表单控件背景色
  --color-bg-form-control: #f7f8fc;
  --color-form-control-placeholder: #b1b7c3;
  --color-checkbox: #d9d9d9;
}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  background-color: var(--color-bg);
  border-radius: 5px;
  width: 8px;
  height: 12px;
  margin-right: 5px;
  right: 5px;
}

/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: transparent;

  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-bg);
  }
}

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
  background-color: var(--color-bg-scrollbar);
}

/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-scrollbar);
  border-radius: 0;

  &:window-inactive {
    background: var(--color-bg-scrollbar);
  }

  &:hover,
  &:active {
    background-color: rgba(190, 190, 190, 0.9);
    cursor: pointer;
  }

  &:horizontal {
    border-width: 6px 1px 1px;
    padding: 0 0 0 100px;
    box-shadow: 0 0 0 0;
  }
}

/*滚动条按钮*/
::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}

.sectionContent {
  background-color: var(--color-bg);
}

body,
.ant-select {
  color: var(--color-text);
}

.ant-modal {
  padding-bottom: 16px;
  border-radius: 12px;

  .ant-modal-content {
    box-shadow: 0 0 0 0;
    border-radius: 12px;
  }

  .ant-modal-header {
    border-bottom: 0;
  }

  .ant-modal-content,
  .ant-modal-footer,
  .ant-modal-header {
    background: #fff;
    // border-radius: 0 !important;
  }
  
  .ant-modal-footer {
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 0 0 12px 12px;
  }

  .ant-modal-close {
    right: 26px;
  }

  &.ant-modal-confirm-info {
    .ant-modal-confirm-title {
      color: var(--color-text);
      font-size: 14px;
      line-height: 1.2;
    }

    .ant-modal-confirm-body > .anticon {
      font-size: 14px;
      color: var(--color-primary);
      margin-right: 8px;
    }
  }
}

.ant-tree {
  background: transparent;
}

.ant-btn-default {
  color: var(--color-text);
  border-color: var(--color-border);
}

.ant-btn-ghost {
  color: var(--color-text) !important;
  background: #fff !important;
  border-color: #cbcdd1;
  border: 1px solid #cbcdd1 !important;
}

.ant-table-wrapper {
  .ant-table {
    color: var(--color-text);
    box-shadow: 0 0 0 0;

    table {
      border-radius: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    // fix: 覆盖global.less
    .ant-table-selection::before {
      content: '';
    }
  }

  .ant-table-thead {
    th {
      background: #fff;
      border-bottom: 1px solid var(--color-border);
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
      padding: 6px 12px !important;
    }

    .ant-checkbox-inner {
      border: 1px solid var(--color-checkbox) !important;
    }
  }

  .ant-table-container {
    border-radius: 0;
  }

  .ant-table-tbody {
    vertical-align: top;
  }

  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
    background-color: var(--color-bg-hover) !important;
  }

  .ant-table-body .ant-table-row-hover {
    background: var(--color-bg-hover) !important;
  }

  .ant-table-body .ant-table-row-hover > td {
    background: var(--color-bg-hover) !important;
  }
}

.ant-pagination {
  .ant-pagination-item {
    a {
      color: var(--color-text);
    }
  }

  .ant-pagination-item-active {
    background: var(--color-primary);
    border-radius: 50%;
    border: 0;

    a {
      color: #fff;
    }
  }

  // .ant-pagination-item-ellipsis {
  //   color: var(--color-text) !important;
  // }

  .ant-select .ant-select-selector {
    box-shadow: 0 0 0 0;
    border: 0;
  }
}

.ant-input,
.ant-select:not(.ant-select-customize-input) .ant-select-selector,
.ant-textarea,
.ant-input-affix-wrapper,
.ant-input-number {
  background-color: var(--color-bg-form-control);
  border-color: var(--color-bg-form-control);
  font-size: 12px;
}

.ant-input,
.ant-select,
.ant-select-selector,
.ant-input-number,
.ant-input-number-input,
.ant-picker,
.ant-picker-input,
.ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
  box-shadow: none !important;
}

.ant-input:focus,
.ant-input-focused {
  border-color: var(--color-primary);
}
.ant-input-clear-icon {
  color: rgba(78, 89, 105, 1);
}
.ant-input-clear-icon:hover {
  color: #000;
}

.ant-input-number {
  width: 100%;
}

.ant-input,
.ant-input-affix-wrapper {
  line-height: 1.834;
}

.ant-form {
  // fix: 修复antd默认border样式出错 1px solid none
  .ant-select .ant-select-selector {
    border: 1px solid var(--color-bg-form-control);
  }

  .ant-form-item-explain-error {
    padding-left: 12px;
  }
  .ant-select-selection-placeholder {
    color: var(--color-form-control-placeholder);
  }
  input,
  select,
  textarea {
    &::placeholder {
      color: var(--color-form-control-placeholder);

      &::after {
        content: '*';
        color: #f54228;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        font-size: 12px;
      }
    }
  }

  .ant-select-arrow {
    color: #4e5969;
  }
}
// 重置select 右边箭头
.ant-select-arrow .anticon {
  width: 16px;
  height: 16px;
  background: url('');
  background-size: cover;
  svg {
    display: none;
  }
}

.ant-radio-checked .ant-radio-inner:after {
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.3s linear;
}

.ant-radio-inner:after {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  border-top: 0;
  border-left: 0;
  border-radius: 16px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s linear;
  content: ' ';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

.ant-alert.ant-alert-info > span:first-child {
  align-self: flex-start;
  margin-top: 4px;
}

.rule-reset,
.import-reset {
  .ant-tag {
    padding: 0 2px;
    line-height: 16px;
  }
  .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
    background: transparent;
  }

  .ant-tabs-ink-bar::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
  }

  .ant-tabs-nav::before {
    display: none;
  }

  .ant-collapse-header,
  .ant-collapse-content-box {
    padding: 0 !important;
  }

  .ant-collapse-arrow {
    font-size: 10px !important;
  }
}

.rule_base_config-reset {
  .ant-tabs-ink-bar {
    display: none;
  }

  .ant-tabs-nav::before {
    display: none;
  }

  .ant-tabs-tab {
    padding: 6px 12px !important;
    line-height: 20px !important;
  }

  .ant-tabs-tab + .ant-tabs-tab {
    margin-left: 20px;
  }

  .ant-tabs-tab-active {
    color: var(--color-primary);
    opacity: 1;
    border-radius: 18px;
    background: rgba(236, 242, 255, 1);
  }
}

.ant-checkbox-wrapper,
.ant-radio-wrapper {
  color: var(--color-text);
  font-size: 14px !important;
}

.ant-checkbox-wrapper {
  align-items: center;
}

.ant-checkbox {
  top: 0;
}

.filter-reset {
  .ant-collapse {
    overflow: hidden;
    background: #ffffff;
    border: 0px;
    border-radius: 4px;
  }

  .ant-collapse-header {
    // padding: 8px 12px !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 20.27px;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    vertical-align: top;
    cursor: auto;
  }

  .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
  .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
    cursor: auto;
    color: rgba(51, 51, 51, 1);
  }

  .ant-collapse-content-box {
    padding: 12px;
    padding-top: 0px !important;
    display: flex;
    flex-direction: column;
  }

  .no-padding .ant-collapse-content-box {
    padding: 0px;
  }

  .ant-checkbox-wrapper {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: #333333;

    .ant-checkbox + span {
      padding: 0 4px;
    }
  }
}
